<template>
    <div>
        <div class="head">
            <van-image width="70" height="70" src="https://img01.yzcdn.cn/vant/cat.jpeg" round />
            <div>
                <span  ref="titleName" v-if="ifshowlogin">{{loginForm.username}}</span>
                <span  @click="ifShow = true" v-else>点我登录</span>
                <!-- 右侧小箭头或X号 -->
                <span id="tit" ref="sign" @click="confirmFn">></span>
            </div>
        </div>
        <!-- 宫格部分 -->
        <div class="con">
            <van-grid :column-num="3"><!-- 一行三个 -->
                <van-grid-item v-for="item in gridArr" :key="item.id" :icon="item.icon" :text="item.type" />
            </van-grid>
        </div>

        <!-- 表单内容 -->
        <div class="ModalBox" v-show='ifShow'>
            <ul id="light">
                <van-form @submit="onSubmit">
                    <van-field v-model="loginForm.username" name="用户名" label="用户名" placeholder="用户名"
                        :rules="[{ required: true, message: '请填写用户名' }]" />
                    <van-field v-model="loginForm.pwd" type="password" name="密码" label="密码" placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]" />
                    <div style="margin: 16px;">
                        <van-button round block type="info" native-type="submit" @click="ifShow = false" background="pink" class="TJ">提交</van-button>
                    </div>
                </van-form>

            </ul>
            <!-- 登录表单遮罩 -->
            <div id="fade" class="black" @click="ifShow = false"></div>
        </div>
    </div>
</template>

<script>
//引入接口
import { loginApi } from '@/api/loginApi';
export default {
    name: '',
    data() {
        return {
            ifShow: false,//是否显示遮罩层
            ifshowlogin:false,//是否显示用户名，默认显示点我登录
            gridArr: [
                // grid数组
                { id: 0, icon: "label-o", type: "我的订单" },
                { id: 1, icon: "bill-o", type: "优惠券" },
                { id: 2, icon: "goods-collect-o", type: "礼品卡" },
                { id: 3, icon: "location-o", type: "我的收藏" },
                { id: 4, icon: "flag-o", type: "我的足迹" },
                { id: 5, icon: "contact", type: "会员福利" },
                { id: 6, icon: "aim", type: "地址管理" },
                { id: 7, icon: "warn-o", type: "账号安全" },
                { id: 8, icon: "service-o", type: "联系客服" },
                { id: 9, icon: "question-o", type: "帮助中心" },
                { id: 10, icon: "smile-comment-o", type: "意见反馈" },
            ],
            loginForm: {
                username: '',
                pwd: ''
            }


        };
    },
    // 在其他页面 进入我的页面时判断是否登录
    mounted() {
        if (localStorage.getItem('token')) {
            // console.log(localStorage.getItem('userInfo'));
            // this.$refs.titleName.innerHTML = JSON.parse(localStorage.getItem('userInfo')).username
            this.loginForm.username= JSON.parse(localStorage.getItem('userInfo')).username
            // // 箭头变为X号
            this.$refs.sign.innerHTML = '×'
            this.ifshowlogin=true
        }
    },
    components: {},
    methods: {
        onSubmit(values) {
            console.log('submit', values);
            // 调用接口函数
            loginApi(JSON.stringify({ username: values["用户名"], pwd: values["密码"] })).then(res => {
                console.log(12123123, res);
                let { userInfo, token } = res.data.data
                //将用户信息存储到本地
                localStorage.setItem('token', token)
                localStorage.setItem('userInfo', JSON.stringify(userInfo))
                this.ifshowlogin=true
                // //将登录的用户名渲染到页面
                this.loginForm.username=userInfo.username
                // 箭头变为X号
                this.$refs.sign.innerHTML = '×'
                // 显示用户名，隐藏点我登录
                this.ifshowlogin=true
            })
        },
        confirmFn() {
            if (localStorage.getItem('token')) {
                this.$dialog.confirm({
                    title: '确认',
                    message: '确定要退出登录吗',
                })
                    .then(() => {
                        // on confirm
                        // 点击确认按钮清空本地token和用户信息
                        localStorage.removeItem('token')
                        localStorage.removeItem('userInfo')
                        // X号变为箭头
                        this.$refs.sign.innerHTML = '>'
                        // 清空表单内容
                        this.loginForm.username=''
                        this.loginForm.pwd=''
                        // 隐藏用户名，显示点我登录
                        this.ifshowlogin=false
                    })
                    .catch(() => {
                        // on cancel
                    });
            }
        }

    }


}

</script>
<style scoped lang="less">
.head {
    width: 100%;
    height: 110px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #333333;

    div {
        padding: 0 5px 0 5px;
        width: 260px;
        height: 24px;
        color: #fff;
        display: flex;
        font-size: 16px;
        justify-content: space-between;
        align-items: center;
    }
}

.ModalBox {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 11;
    left: 0;
    top: 0;
}

.con {
    width: 100%;
    height: auto;

    .van-grid-item {
        height: 125px;
    }
}


#light {
    width: 90%;
    height: 240px;
    background-color: #fff;
    position: fixed;
    top: 25%;
    left: 5%;
    z-index: 33;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    // display: none;
    .TJ{
        background-color:#EE0A24;
        border: none;
    }

}

.black {
    // display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    z-index: 22;
    -moz-opacity: 0.8;
    opacity: .80;
    background: rgba(0, 0, 0, .5);
}

#tit {
    font-size: 25px;
}
</style>